

<template>
    <div class="glists"> 
        <ul class="glist">
        <li v-for="(l,i) in list" :key="i">
                <div class="info">
                    <img :src="l.img" class="img" alt="">
                    <h3  class="title">{{l.name}}</h3>
                </div>
        </li>
    </ul>
    </div>
</template>




    <script>
export default {
    props:{
        list:[Array,Object],
    },
}
</script>

<style lang="scss" scoped>
.glists{
    background: #fff;
    width: 100%;
    height: 100%;
    .glist{
    width:100%;
    padding:15px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    li{
        text-align: center;
        width:33%;
        background: #fff;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .info{
            margin-top:10px;
            margin-bottom: 12px;
            .img{
                width: 78px;
                height: 78px;
            }
            .title{
                color:#666;
                text-align: center;
                font-size: 16px;
            }
        }
    }
}
}
</style>